<template>
	<view class="pages">
		<view :class="scrollTop>0?'top-tab-scroll':''" class="dis-flex top-tab col-9 f-w800 f-36">
			<view @click="changeType(index)" v-for="(item,index) in typeList" :key="index"
				:class="typeIndex === index?(scrollTop>0?'top-tab-item-active-scroll':'top-tab-item-active'):'top-tab-item'">
				{{item}}
			</view>
		</view>
		<view @click="goLink(`/pages/detail/activity?id=${item.activity_id}`)" class="card m-b-30"
			v-for="(item,index) in activityList" :key="index">
			<image :src="item.img" mode=""></image>
			<view class="flex-between-column flex-1">
				<view class="u-line-2">{{item.a_name}}</view>
				<view class="flex-1"></view>
				<view class="flex-between-row">
					<view class="col-9 f-26">{{item.start_time}}</view>
					<view class="card-button f-28" :class="item.status?'col-f':'card-button-red col-0'">
						{{item.status?'已报名':'未报名'}}
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" loadingText="正在加载中,上下滑动重新加载" />
		<u-back-top bottom="100" :scrollTop="scrollTop" top="200" :customStyle="{'background-color':'#2979ff'}"
			:iconStyle="{
				'fontSize': '40rpx',
				'color':'#FFF' }"></u-back-top>
		<!-- 底部导航栏 -->
		<Tabbar :current="1"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	import {
		getActivityListDetail
	} from '@/api/list.js'
	export default {
		components: {
			Tabbar
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			if (!this.$store.getters.userInfo.token) {
				return this.goLogin()
			}
		},
		onLoad() {
			this.getActivityList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.getActivityList()
		},
		data() {
			return {
				status: 'nomore',
				page: 1,
				typeList: ['全部', '已报名'],
				typeIndex: 0,
				scrollTop: 0,
				activityList: []
			};
		},
		methods: {
			initList() {
				this.activityList = []
				this.page = 1
			},
			changeType(index) {
				if (this.typeIndex === index) {
					return
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				this.typeIndex = index
				this.initList()
				this.getActivityList()
			},
			async getActivityList() {
				this.status = 'loading'
				const res = await getActivityListDetail({
					type: this.typeIndex,
					page: this.page,
					limit: 8
				})
				this.status = 'nomore'
				if (res.code === 200) {
					if (res.data.length === 0) return
					this.page++
					this.activityList.push(...res.data)
				}
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(-225deg, rgba(254, 214, 227, 0.5) 22.22%, rgba(168, 237, 234, 0.5) 51.08%, rgba(254, 214, 227, 0.5) 78.34%);
	}
</style>

<style lang="scss" scoped>
	.pages {
		padding: 0rpx 30rpx 160rpx;
	}

	.top-tab {
		width: 100%;
		z-index: 999;

		&-scroll {
			position: fixed;
			top: 0;
			left: 0;
			background-color: #fff;
		}

		&-item {
			padding: 30rpx;

			&-active {
				margin: 14rpx;
				padding: 16rpx;
				border-radius: 20rpx;
				background-color: #fff;
				color: #333;

				&-scroll {
					margin: 14rpx;
					padding: 16rpx;
					border-radius: 20rpx;
					background-color: #ffe1ea;
					color: #333;
				}
			}
		}
	}

	.card {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 0.8);

		image {
			margin-right: 30rpx;
			width: 246rpx;
			height: 160rpx;
			border-radius: 12rpx;
		}

		&-button {
			padding: 10rpx;
			border-radius: 20rpx;
			background-color: skyblue;

			&-red {
				background-color: #ffe1ea;
			}
		}
	}
</style>
